<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>作用域插槽</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<child-one v-if="type === 'child-one'"></child-one>
		<child-two v-if="type === 'child-two'"></child-two>
		
		<!-- 动态组件 -->
		<!-- <component :is="type"></component> -->

		<button @click="typeToggle">toggle</button>
	</div>
	<script>
		// v-once 组件不会被销毁，而是放到内存，避免频繁创建、销毁组件。适合一些静态页面
		Vue.component("child-one",{
			template: "<div v-once> chile-one </div>"
		})

		Vue.component("child-two",{
			template: "<div v-once> chile-two </div>"
		})

		new Vue({
			el: "#app",
			data: {
				type: "child-one"
			},
			methods: {
				typeToggle: function() {
					this.type = this.type === "child-one" ? "child-two" : "child-one"
				}
			}
		})
	</script>
</body>
</html>